<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta
			name="viewport"
			content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no"
		/>
		<meta name="format-detection" content="telephone=no" />
		<meta name="format-detection" content="email=no" />
		<meta http-equiv="Pragma" content="no-cache" />
		<meta http-equiv="Cache-Control" content="no-cache" />
		<meta http-equiv="Expires" content="0" />
		<title>填写基本信息</title>
		<meta
			name="description"
			content="为了方便医生对您进行更好的后续管理，需要您配合在建档过程中填写基本信息。请确保信息准确无误，此部分信息仅用于建档及后续管理查阅。"
		/>
		<meta
			property="og:description"
			content="为了方便医生对您进行更好的后续管理，需要您配合在建档过程中填写基本信息。请确保信息准确无误，此部分信息仅用于建档及后续管理查阅。"
		/>
		<!-- 引入 vant UI 组件库样式文件 -->
		<link rel="stylesheet" href="../../common/css/vant-index.css" />
		<link rel="stylesheet" type="text/css" href="../../common/css/common.css" />
		<link rel="stylesheet" type="text/css" href="../css/baseInfo.css" />
		<style>
			.container {
				min-height: 9.44rem;
				padding-bottom: 1.92rem;
			}
			.user {
				position: absolute;
				left: 0.21rem;
				bottom: 1.29rem;
				font-size: 0.25rem;
				color: #0068c4;
			}
			.agree {
				text-align: center;
				margin-top: 0.21rem;
				/* position: fixed;
				bottom: 1.42rem;
				left: 1rem; */
			}
			.agree img {
				width: 0.32rem;
				height: 0.32rem;
				margin-right: 0.16rem;
			}
			.agree a {
				color: #4ca7e4;
			}
			.mutiInput {
				display: flex;
				position: relative;
				margin-bottom: 0.24rem;
				flex-wrap: nowrap !important;
				justify-content: space-between !important;
				align-items: center;
			}
			.mutiInput .van-field__control {
				width: 70%;
			}
			.unit {
				position: absolute;
				right: 0.28rem;
				color: #ccc;
			}
			.bmiTitle {
				justify-content: space-between !important;
			}
		</style>
	</head>

	<body>
		<div id="app" v-cloak>
			<van-nav-bar
				title="基本信息"
				left-text="返回"
				left-arrow
				@click-left="onClickLeft"
				@click-right="onClickRight"
			>
				<template #right>
					<van-icon name="wap-home-o" size="18" />
				</template>
			</van-nav-bar>
			<div class="container">
				<div class="info-title">
					<i></i>
					<span>基本信息</span>
				</div>
				<div
					class="info-question"
					v-for="(item,index) in questionList"
					:key="item.key"
				>
					<p :class="item.type == 'button' ? 'marginTop' : ''">
						{{item.title}}<span
							v-if="index == 0||index == 1||index == 2"
							style="color: red"
							>*</span
						>
					</p>
					<div v-if="item.type == 'input'">
						<van-field
							v-model="info[item.key]"
							:placeholder="item.placeholder"
						/>
					</div>
					<div v-if="item.type == 'mutiInput'">
						<template v-for="v in item.inputList" :key="v.title">
							<div>{{v.title}}</div>
							<van-field v-model="info[v.key]" :placeholder="v.placeholder">
							</van-field>
						</template>
					</div>
					<div v-if="item.type == 'number'">
						<van-password-input
							:value="info[item.key]"
							:focused="showKeyboard"
							@focus="showKeyboard = true"
						/>
						<van-number-keyboard
							v-model="info[item.key]"
							:show="showKeyboard"
							@blur="showKeyboard = false"
						/>
					</div>
					<div v-if="item.type == 'button'">
						<van-button
							v-for="(v, i) in item.button"
							:class="v.active ? 'active' : ''"
							@click="handleClick(v, i)"
							>{{v.label}}</van-button
						>
					</div>
					<div v-if="item.type == 'time'">
						<div class="timePicker" @click="clickTime(item)">
							<span>{{placeholder[item.key]}}</span>
							<img class="datePick" src="../img/date.png" />
						</div>
						<van-popup
							:key="item.key"
							v-model:show="item.show"
							position="bottom"
						>
							<van-datetime-picker
								v-model="info[item.key]"
								type="date"
								title="年/月/日"
								:formatter="formatter"
								:min-date="minDate"
								:max-date="maxDate"
								@cancel="onCancel"
								@confirm="onConfirm(item)"
							/>
						</van-popup>
					</div>
				</div>
				<div
					class="info-question"
					v-if="info.diseaseProfile&&info.diseaseProfile.includes('2')"
				>
					<p>
						{{pressNum+'.最近一次血压记录'}}
						<!-- <span style="color: red">*</span> -->
					</p>
					<div class="mutiInput">
						<div style="font-size: 0.28rem">舒张压</div>
						<van-field
							v-model="info.bloodDiastolicPress"
							style="width: 5.5rem"
							placeholder="请输入舒张压"
						>
						</van-field>
						<span class="unit">mmHg</span>
					</div>
					<div class="mutiInput">
						<div style="font-size: 0.28rem">收缩压</div>
						<van-field
							v-model="info.bloodSystolicPress"
							style="width: 5.5rem"
							placeholder="请输入收缩压"
						>
						</van-field>
						<span class="unit">mmHg</span>
					</div>
				</div>
				<div
					class="info-question"
					v-if="info.diseaseProfile&&info.diseaseProfile.includes('3')"
				>
					<div class="bmiTitle">
						<p>
							{{bmiNum+'.BMI'}}
							<!-- <span style="color: red">*</span> -->
						</p>
						<p>{{bmi}}</p>
					</div>
					<div class="mutiInput">
						<div style="font-size: 0.28rem">身高</div>
						<van-field
							v-model="info.height"
							style="width: 5.5rem"
							placeholder="请输入身高"
						>
						</van-field>
						<span class="unit">cm</span>
					</div>
					<div class="mutiInput">
						<div style="font-size: 0.28rem">体重</div>
						<van-field
							v-model="info.weight"
							style="width: 5.5rem"
							placeholder="请输入体重"
						>
						</van-field>
						<span class="unit">kg</span>
					</div>
				</div>
				<div
					class="info-question"
					v-if="info.diseaseProfile&&info.diseaseProfile.includes('4')"
				>
					<p>
						{{goutNum+'.发生情况'}}
						<!-- <span style="color: red">*</span> -->
					</p>
					<div class="mutiInput">
						<van-button
							v-for="(v, i) in gout"
							:class="v.active ? 'active' : ''"
							@click="handleGout(v, i)"
							>{{v.label}}</van-button
						>
					</div>
					<div class="mutiInput">
						<div style="font-size: 0.28rem">血尿酸</div>
						<van-field
							v-model="info.goutBua"
							style="width: 5.5rem"
							placeholder="请输入血尿酸"
						>
						</van-field>
						<span class="unit">μmol/L</span>
					</div>
				</div>
				<div class="info-question">
					<p>
						{{photoNum+'.体型照片'}}
						<!-- <span style="color: red">*</span> -->
					</p>
					<span>请上传患者体型照片（全身）正面、侧面各一张</span>
					<van-uploader
						style="margin-top: 0.21rem"
						v-model="photo"
						:max-count="3"
						:before-delete="beforeDelete"
						:after-read="afterRead"
					>
						<img
							src="../../doctor/img/photo.png"
							style="width: 1.21rem; height: 1.21rem; display: inline-block"
						/>
					</van-uploader>
				</div>
				<div class="agree" @click="handleAgree">
					<img :src="agree?'../img/select.png':'../img/unselect.png'" />
					<span
						>我已阅读并同意<a @click.stop="click">《知情同意书》</a>、<a
							@click.stop="toService"
							>《用户告知书》</a
						></span
					>
				</div>
				<div class="baseInfo_value" @click="postData">
					<span style="color: #f3f3f3">提交</span>
				</div>
				<!-- <a class="user" href="../../patient/regulation/patientNotice.html"
					>《用户告知书》</a
				> -->
			</div>
		</div>
	</body>
	<!-- 上线环境用 -->
	<script src="../../base.js"></script>
	<script src="../../common/js/vue.global.prod.js?time=202208130943"></script>
	<!-- 引入 UI 组件库 -->
	<script src="../../common/js/vant.min.js"></script>
	<!-- axios 接口调用 -->
	<script src="../../common/js/axios.min.js"></script>
	<script src="../../common/js/rem.js"></script>
	<script src="../../common/js/url.min.js"></script>
	<!-- <script src="https://cdn.bootcdn.net/ajax/libs/vConsole/3.9.0/vconsole.min.js"></script> -->

	<script type="module">
		// var vConsole = new VConsole()
		import {
			getAction,
			postAction,
			spliceUrl,
		} from '../../common/js/api/vue3-axios-utils.js'
		import { mixin } from '../js/mixin.js'
		const baseInfo = {
			mixins: [mixin],
			data() {
				return {
					from: '',
					questionList: [],
					question: [
						{
							title: '1.您的姓名',
							type: 'input',
							key: 'name',
							placeholder: '请输入姓名',
						},
						{
							title: '2.性别',
							type: 'button',
							key: 'sex',
							button: [
								{ label: '男', key: 'sex', value: '1' },
								{ label: '女', key: 'sex', value: '2' },
							],
						},
						{
							title: '3.手机号码',
							type: 'input',
							key: 'phone',
							placeholder: '请输入手机号码',
						},
						{
							title: '4.出生日期',
							type: 'time',
							show: false,
							key: 'birthday',
							placeholder: '年/月/日',
						},
						{
							title: '5.病情类型',
							type: 'button',
							key: 'diseaseProfile',
							multiple: true,
							button: [
								{ label: '糖尿病', key: 'diseaseProfile', value: '1' },
								{ label: '高血压', key: 'diseaseProfile', value: '2' },
								{ label: '肥胖', key: 'diseaseProfile', value: '3' },
								{ label: '痛风', key: 'diseaseProfile', value: '4' },
							],
						},
					],
					gout: [
						{ label: '曾经发作', key: 'diseaseProfile', value: '0' },
						{ label: '正在发作', key: 'diseaseProfile', value: '1' },
					],
					diabetes: [
						{
							title: '.糖尿病确诊情况',
							type: 'button',
							key: 'diabetesDiagnosis',
							button: [
								{ label: '未确诊', key: 'diabetesDiagnosis', value: '1' },
								{ label: '已确诊', key: 'diabetesDiagnosis', value: '2' },
							],
						},
					],
					diabetesList: [
						{
							title: '.糖尿病类型',
							type: 'button',
							key: 'diabetesType',
							button: [
								{ label: '1型糖尿病', key: 'diabetesType', value: '1' },
								{ label: '2型糖尿病', key: 'diabetesType', value: '2' },
								{ label: '妊娠糖尿病', key: 'diabetesType', value: '3' },
								{
									label: '其他类型糖尿病',
									key: 'diabetesType',
									value: '4',
								},
							],
						},
						{
							title: '.确诊日期',
							type: 'time',
							key: 'diabetesDiagnosisDate',
							show: false,
							placeholder: '年/月/日',
						},
					],
					info: {},
					agree: false,
					show: false,
					photo: [],
					photoNum: 0,
					placeholder: {
						diabetesDiagnosisDate: '',
						birthday: '',
					},
					canSubmit: true,
					diabetesDiagnosisDate: '',
					getUrl: '/archive/basic/get',
					postUrl: '/archive/basic/save',
					minDate: new Date(1920, 0, 1),
					maxDate: new Date(),
					url: {
						upLoad: '/sys/common/upload',
					},
				}
			},
			watch: {
				'info.diseaseProfile'(n) {
					if (n.includes('1')) {
						this.diabetes.forEach((v, i) => {
							!v.title.split('.')[0] &&
								(v.title = this.question.length + i + 1 + v.title)
						})
						this.questionList = this.question.concat(this.diabetes)
						if (this.questionList.length < 8) {
							if (this.info.diabetesDiagnosis == '2') {
								this.diabetesList.forEach((v, i) => {
									!v.title.split('.')[0] &&
										(v.title = this.questionList.length + i + 1 + v.title)
								})
								this.questionList = this.questionList.concat(this.diabetesList)
							} else if (this.info.diabetesDiagnosis == '1') {
								this.diabetes.forEach((v, i) => {
									!v.title.split('.')[0] &&
										(v.title = this.questionList.length + i + 1 + v.title)
								})
								this.questionList = this.question.concat(this.diabetes)
							}
						}
					} else if (!n.includes('1')) {
						this.questionList = this.question
					} else if (n.includes('2')) {
					} else if (n.includes('3')) {
					} else if (n == '') {
						this.questionList = this.question
						this.diabetes.forEach(v => {
							v.title = '.' + v.title.split('.')[1]
							this.info[v.key] = ''
							if (v.type == 'button') {
								v.button.forEach(item => {
									item.active = false
								})
							}
						})
						this.diabetesList.forEach(v => {
							v.title = '.' + v.title.split('.')[1]
							this.info[v.key] = ''
							if (v.type == 'button') {
								v.button.forEach(item => {
									item.active = false
								})
							}
						})
					}
					if (n.includes('4')) {
						this.info.gout = 1
					} else {
						this.info.gout = 0
					}
					this.$nextTick(() => {
						this.photoNum = document.querySelectorAll('.info-question').length
					})
				},
				'info.diabetesDiagnosis'(n) {
					if (this.info.diabetesDiagnosis == '2') {
						this.diabetesList.forEach((v, i) => {
							!v.title.split('.')[0] &&
								(v.title = this.questionList.length + i + 1 + v.title)
						})
						this.questionList = this.questionList.concat(this.diabetesList)
					} else if (this.info.diabetesDiagnosis == '1') {
						this.diabetes.forEach((v, i) => {
							!v.title.split('.')[0] &&
								(v.title = this.questionList.length + i + 1 + v.title)
						})
						this.questionList = this.question.concat(this.diabetes)
					}
					this.$nextTick(() => {
						this.photoNum = document.querySelectorAll('.info-question').length
					})
				},
			},
			computed: {
				pressNum() {
					return this.questionList.length + 1
				},
				bmiNum() {
					return this.info.diseaseProfile &&
						this.info.diseaseProfile.includes('2')
						? this.questionList.length + 2
						: this.questionList.length + 1
				},
				bmi() {
					const bmi = (
						Number(this.info.weight) /
						((Number(this.info.height) / 100) *
							(Number(this.info.height) / 100))
					).toFixed(2)
					return this.info.height && this.info.weight ? bmi : ''
				},
				goutNum() {
					if (this.info.diseaseProfile) {
						if (
							this.info.diseaseProfile.includes('2') &&
							this.info.diseaseProfile.includes('3')
						) {
							return this.questionList.length + 3
						} else if (
							this.info.diseaseProfile.includes('2') ||
							this.info.diseaseProfile.includes('3')
						) {
							return this.questionList.length + 2
						} else {
							return this.questionList.length + 1
						}
					} else {
						return this.questionList.length + 1
					}
				},
			},
			created() {
				this.questionList = this.question
				this.placeholder.diabetesDiagnosisDate = '年/月/日'
				this.placeholder.birthday = '年/月/日'
				// this.fetchData()
			},
			mounted() {
				this.photoNum = document.querySelectorAll('.info-question').length
			},
			methods: {
				fetchData() {
					const patientId = localStorage.getItem('pid')
					// const patientId = url('?pid')
					getAction(spliceUrl(this.getUrl), { patientId }).then(res => {
						if (res.data.success) {
							res.data.result && (this.info = res.data.result)
							this.info.diseaseProfile = res.data.result.diseaseProfile
								? res.data.result.diseaseProfile
								: res.data.result.diabetesDiagnosis
								? '1'
								: ''
							const birthday = res.data.result.birthday
							const diabetesDiagnosisDate =
								res.data.result.diabetesDiagnosisDate
							diabetesDiagnosisDate &&
								(this.placeholder.diabetesDiagnosisDate = diabetesDiagnosisDate)
							diabetesDiagnosisDate &&
								(this.diabetesDiagnosisDate = diabetesDiagnosisDate)
							birthday && (this.placeholder.birthday = birthday)
							const date1 = new Date(birthday)
							const date2 = new Date(diabetesDiagnosisDate)
							this.info.birthday = birthday ? date1 : new Date()
							this.info.diabetesDiagnosisDate = diabetesDiagnosisDate
								? date2
								: new Date()
							this.$nextTick(() => {
								this.gout.forEach(n => {
									if (n.value == this.info.goutStatus) {
										n.active = true
									}
								})
								this.questionList.forEach(v => {
									for (let i in this.info) {
										if (i == v.key && v.type == 'button') {
											v.button.forEach(n => {
												if (n.value == this.info[i]) {
													n.active = true
												}
											})
										}
										if (i == v.key && v.type == 'button' && v.multiple) {
											v.button.forEach(n => {
												if (this.info[i].includes(n.value)) {
													n.active = true
												}
											})
										}
									}
								})
							})
							this.info.patientBodyImage = this.info.patientBodyImage
								? this.info.patientBodyImage.split(',')
								: []
							this.photo = this.info.patientBodyImage.map(v => {
								return {
									url: v,
									file: new File([], '文件名称', {}),
								}
							})
							// this.info.patientId = patientId
						} else {
							console.log(res.data.message)
							this.info.birthday = new Date()
							this.info.diabetesDiagnosisDate = new Date()
							this.info.patientBodyImage = []
						}
					})
				},
				image2Base64(img) {
					var canvas = document.createElement('canvas')
					canvas.width = img.width
					canvas.height = img.height
					var ctx = canvas.getContext('2d')
					ctx.drawImage(img, 0, 0, img.width, img.height)
					var dataURL = canvas.toDataURL('image/png')
					return dataURL
				},
				clickTime(item) {
					const index = this.questionList.findIndex(v => v.key == item.key)
					this.questionList[index].show = true
				},
				click() {
					window.location.href = './consent.html'
				},
				toService() {
					window.location.href = '../../patient/regulation/patientNotice.html'
				},
				handleAgree() {
					this.agree = this.agree ? false : true
				},
				onConfirm(item) {
					const { info } = this
					const time = this.formateDate(info[item.key])
					this.info[item.key] = time
					this.placeholder[item.key] = time
					this.questionList.forEach(v => {
						if (v.show) {
							v.show = false
						}
					})
				},
				beforeDelete(file, item) {
					this.info.patientBodyImage.splice(item.index, 1)
					return true
				},
				afterRead(file) {
					let formData = new FormData()
					file.status = 'uploading'
					file.message = '上传中...'
					this.canSubmit = false
					formData.append('file', file.file)
					postAction(spliceUrl(this.url.upLoad), formData).then(res => {
						if (res.data.success) {
							if (this.info.patientBodyImage) {
								this.info.patientBodyImage.push(res.data.message)
							} else {
								this.info.patientBodyImage = []
								this.info.patientBodyImage.push(res.data.message)
							}
							file.status = 'done'
							file.message = '上传成功'
							this.canSubmit = true
							this.$toast.success('上传成功')
						}
					})
				},
				check() {
					if (!this.info.name) {
						this.$toast.fail('请输入名字!')
						return false
					}
					if (!this.info.sex) {
						this.$toast.fail('请选择性别!')
						return false
					}
					if (!this.info.phone) {
						this.$toast.fail('请输入手机号!')
						return false
					}
					const regex = /^1[3456789]\d{9}$/
					if (!regex.test(this.info.phone)) {
						this.$toast.fail('手机号码格式错误！')
						return false
					}
					// if (this.placeholder.birthday.indexOf('年') != -1) {
					// 	this.$toast.fail('请选择出生日期!')
					// 	return false
					// }
					// if (!this.info.diabetesDiagnosis) {
					// 	this.$toast.fail('请选择确诊情况!')
					// 	return false
					// }
					// if (this.info.diabetesDiagnosis == 2 && !this.info.diabetesType) {
					// 	this.$toast.fail('请选择糖尿病类型!')
					// 	return false
					// }
					// if (
					// 	this.info.diabetesDiagnosis == 2 &&
					// 	this.placeholder.diabetesDiagnosisDate.indexOf('年') != -1
					// ) {
					// 	this.$toast.fail('请选择确诊日期!')
					// 	return false
					// }
					if (!this.agree) {
						this.$toast.fail({
							message: '请阅读《知情同意书》及《用户告知书》并勾选',
						})
						return false
					}
					// if (
					// 	this.info.patientBodyImage.length > -1 &&
					// 	this.info.patientBodyImage.length < 2
					// ) {
					// 	this.$toast.fail('请上传患者体型照片（全身）正面、侧面各一张!')
					// 	return false
					// }
					return true
				},
				formateDate(date) {
					var d = new Date(date)
					var y = d.getFullYear()
					var m = d.getMonth() + 1
					var d1 = d.getDate()
					m = m < 10 ? '0' + m : m
					d1 = d1 < 10 ? '0' + d1 : d1
					const time = y + '-' + m + '-' + d1
					return time
				},
				onCancel() {
					this.questionList.forEach(v => {
						if (v.show) {
							v.show = false
						}
					})
				},
				handleClick(v, i) {
					this.questionList.forEach(n => {
						if (n.key == v.key) {
							if (!n.multiple) {
								this.info[v.key] = v.value
								n.button.forEach(item => {
									item.active = false
								})
								n.button[i].active = true
							} else {
								n.button[i].active = n.button[i].active ? false : true
								this.info[v.key] = this.info[v.key] ?? []
								this.info[v.key] = n.button
									.filter(k => k.active)
									.map(item => {
										return item.value
									})
									.join(',')
							}
						}
					})
				},
				handleGout(v, i) {
					this.gout.forEach(item => {
						item.active = false
					})
					this.gout[i].active = true
					this.info.goutStatus = v.value
				},
				formatter(type, val) {
					if (type === 'year') {
						return `${val}年`
					} else if (type === 'month') {
						return `${val}月`
					}
					return val
				},
				postData() {
					if (!this.canSubmit) return
					if (!this.check()) return
					const {
						birthday,
						diabetesDiagnosis,
						diabetesDiagnosisDate,
						diabetesType,
						name,
						patientId,
						phone,
						sex,
						patientBodyImage,
					} = this.info
					const bir = this.formateDate(birthday)
					const dis = this.formateDate(diabetesDiagnosisDate)
					const params = {
						...this.info,
						birthday: bir,
						diabetesDiagnosis,
						diabetesDiagnosisDate: diabetesDiagnosis == 2 ? dis : null,
						diabetesType: diabetesDiagnosis == 2 ? diabetesType : null,
						name,
						patientId,
						phone,
						sex,
						patientBodyImage:
							(patientBodyImage && patientBodyImage.join(',')) || '',
					}
					postAction(spliceUrl(this.postUrl), params).then(res => {
						// if(url('?state') == 'roleIndex') {
						// 	const patientId = localStorage.getItem('pid')
						// 	window.location.href = '../../patient/index.html?userid='+patientId
						// } else {
						if (res.data.success) {
							this.$toast.success('提交成功')
							window.location.href = '../index.html'
						} else {
							vant.Toast.fail(res.data.message)
						}
						// }
					})
				},
				onClickLeft() {
					history.back()
				},
				onClickRight() {
					window.location.href = '../index.html'
				},
			},
		}

		const app = Vue.createApp(baseInfo)

		app.use(vant)
		// 通过 CDN 引入时不会自动注册 Lazyload 组件
		// 可以通过下面的方式手动注册
		app.use(vant.Lazyload)
		app.use(vant.Popup)

		// 调用函数组件，弹出一个 Toast
		// vant.Toast("刷新成功");
		app.mount('#app')
	</script>
</html>
